<template>
    <div @click="handleClick" v-show="showRef" class="to-top-container">
        Top
    </div>
</template>
<script setup lang='ts'>
import { onMounted, onUnmounted, ref } from 'vue';
import { $bus, bindMainScrollEvent } from '~@/bus/busIndex';

    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion
const showRef=ref(false);




const handleClick=()=>{
    $bus.emit('setMainScroll',0);
}

const handleScroll=(dom:undefined | HTMLElement)=>{
    if(dom){
        if(dom.scrollTop>500){
            showRef.value=true;
        }else{
            showRef.value=false;
        }
    }else{
        //dom不存在
        showRef.value=false;
    }
}

bindMainScrollEvent(handleScroll);
    
</script>
<style lang='less' scoped>
 .to-top-container {
  background: @primary;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: fixed;
  z-index: 99;
  right: 50px;
  bottom: 50px;
  cursor: pointer;
  line-height: 50px;
  color: #fff;
  text-align: center;
}   
</style>